<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.5D 房间编辑器 - 渡物 Dimension</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<div class="logo-sticker">
  <img src="assets/images/logo.png" alt="渡物 Dimension Logo">
</div>

<div class="top-right-img">
    <img src="assets/images/right_nav.png" alt="top right image">
</div>

<header class="site-header">
  <div class="nav-container">

    <!-- 导航菜单 -->
    <nav class="nav-menu">
	  <div class="nav-item">
          <a href="welcome.html">首页</a>
        </div>
		
      <div class="nav-item">
        <a href="designs.html" style="color: var(--primary); font-weight: 600;">设计</a>
      </div>
	  
      <div class="nav-item dropdown">
        <span><a href="categories.html">商品<a></span>
        <div class="dropdown-content">
          <a href="categories.html#基础">基础
		  <img src="assets/images/1.png" alt="基础" class="menu-img">
		  </a>
          <a href="categories.html#灯类">灯类
		  <img src="assets/images/2.png" alt="灯类" class="menu-img">
		  </a>
          <a href="categories.html#床类">床类
		  <img src="assets/images/3.png" alt="床类" class="menu-img">
		  </a>
          <a href="categories.html#桌类">桌类
		  <img src="assets/images/4.png" alt="桌类" class="menu-img">
		  </a>
          <a href="categories.html#椅类">椅类
		  <img src="assets/images/5.png" alt="椅类" class="menu-img">
		  </a>
		  <a href="categories.html#凳类">凳类
		  <img src="assets/images/6.png" alt="凳类" class="menu-img">
		  </a>
		  <a href="categories.html#沙发">沙发
		  <img src="assets/images/7.png" alt="沙发" class="menu-img">
		  </a>
		  <a href="categories.html#柜类">柜类
		  <img src="assets/images/8.png" alt="柜类" class="menu-img">
		  </a>
		  <a href="categories.html#架类">架类
		  <img src="assets/images/9.png" alt="架类" class="menu-img">
		  </a>
		  <a href="categories.html#装饰">装饰
		  <img src="assets/images/10.png" alt="装饰" class="menu-img">
		  </a>
		  <a href="categories.html#组合">组合
		  <img src="assets/images/11.png" alt="组合" class="menu-img">
		  </a>
		  <a href="categories.html#其他">其他
		  <img src="assets/images/12.png" alt="其他" class="menu-img">
		  </a>
        </div>
      </div>

      <div class="nav-item search">
        <input type="text" placeholder="搜索商品..." />
      </div>

      <div class="nav-item">
        <a href="settings.html">设置</a>
      </div>

      <div class="nav-item">
        <a href="user.html">个人中心</a>
      </div>

      <div class="nav-item">
        <a href="contact.html">联系我们</a>
      </div>
      <div class="nav-item">
          <button class="music-toggle btn btn-outline">🎵</button>
      </div>
    </nav>
  </div>
</header>

<body>
<!-- 导航占位，确保内容不被顶部导航遮挡 -->
  <div class="nav-spacer"></div>

    <div class="container">
        <section>
            <h2>2.5D 房间编辑器</h2>
            <div class="editor-controls flex gap-2">
                <select id="element-selector">
                    <option value="">选择元素</option>
                </select>
                <button class="btn" onclick="clearCanvas()">清除画布</button>
            </div>
            <canvas id="editor-canvas" width="800" height="600"></canvas>
        </section>
    </div>

      <!-- 页脚 -->
  <footer class="site-footer">
    © 2025 渡物 Dimension. 保留所有权利。
  </footer>

    <script src="script.js"></script>
    <script src="assets/js/search.js"></script>
</body>
</html>